<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>测试axios请求数据</title>
  <script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.net/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<h1>vue全家桶中向后端请求数据的封装的ajax库</h1>
<div id="app">
  <h1>学生信息展示</h1>
  <table class="nicetab">
    <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>电话</th>
      <th>成绩</th>
      <th>操作1</th>
      <th>操作2</th>
    </tr>
    </thead>
    <tbody class="tab">
    <tr v-for="stu in stuData">
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.height}}</td>
      <td>{{stu.school}}</td>
      <td>删除</td>
      <td>修改</td>
    </tr>
    </tbody>
  </table>
</div>
</div>
</body>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data() {
      return {
        stuData: {
          id: "",
          name: "",
          age:null,
          height: "",
          school: null
        }
      }
    },
    mounted() {//js 异步 同步形式  生命周期
      axios
              .get('/lodinweb2_0_war_exploded/student')
              .then((response) => {
                this.stuData = response.data;
              }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    }
  })
</script>
</html>